<template>
  <div>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const props = defineProps<{
  series: any
}>()

const chartContainer = ref<HTMLElement | null>(null);

onMounted(() => {
  if (chartContainer.value) {
    const chartInstance = echarts.init(chartContainer.value);

    const option = {
      xAxis: {
        data: [0, 4, 8, 12, 16, 20, 24],
        // max: 24,
        axisLine: {
          show: false, // 隐藏 Y 轴的刻度线
        },
        axisTick: {
          show: false, // 隐藏刻度线
        },
        // 网格线样式设置在yAxis内部
        splitLine: {
          show: true,
          lineStyle: {
            color: '#555555',
            type: 'dashed',
          },

        },
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false, // 隐藏 Y 轴的刻度线
        },
        axisTick: {
          show: false, // 隐藏刻度线
        },
        // 网格线样式设置在yAxis内部
        splitLine: {
          show: true,
          lineStyle: {
            color: '#555555',
            type: 'dashed',
          },
        },
        boundaryGap: false,
        min: 0,
      },
      grid: {
        top: '15%',
        left: '15%', // 距离左边的距离
        right: '15%', // 距离右边的距离
        bottom: '15%', // 距离底部的距离
      },
      // legend: {
      //   data: ['Sales1', 'Sales2']
      // },
      
      series: [
        {
          data: props.series.series1,
          type: 'line',
          smooth: true,
          name: 'Sales1',
          showSymbol: false,
          lineStyle: {
            color: 'rgb(54, 151, 249)',
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(54, 151, 249, 0.4)'
              },
              {
                offset: 1,
                color: 'rgb(54, 151, 249, 0)'
              }
            ])
          },
        },
        {
          data: props.series.series2,
          type: 'line',
          smooth: true,
          name: 'Sales2',
          showSymbol: false,
          lineStyle: {
            color: 'rgb(49, 220, 252)',
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(49, 220, 252, 0.4)'
              },
              {
                offset: 1,
                color: 'rgb(49, 220, 252, 0)'
              }
            ])
          },
        },
      ],
    };

    chartInstance.setOption(option);
  }
});
</script>
